<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>齐鲁制药</title>
    <link rel="stylesheet" href="../bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#btn1").click(function(){
                test1();
            });
            $("#btn2").click(function(){
                $.test2();
            });
        });
        function test1(){
            $.ajax({
                url:'/msg1/getAllJson',
                type:'get',
                dataType:'json',
                success:function(data){
                    $("#tabletest").find('tr').remove();
                    tr='<td>id</td><td>Message</td>'
                    $("#tabletest").append('<tr>'+tr+'</tr>')
//方法中传入的参数data为后台获取的数据
                    for(i in data) //data指的是数组，i为数组的索引
                    {
                        var tr;
                        tr='<td>'+data[i].id+'</td>'+'<td>'+data[i].message +'</td>'
                        $("#tabletest").append('<tr>'+tr+'</tr>')
                    }
                }
            });
        }
    </script>
</head>
<body>
<div class="center">
    <p id="test">Springboot整合MyBatis通过ajax查询MySQL数据库数据</b></p>
    <button id="btn1">显示所有数据</button>
    <button id="btn2">查询</button>
    <input id="id" name="id" type="text" placeholder="请输入id值"/>
    <br>
    <table class="table table-bordered" id='tabletest'>
    </table> 
</div>
</body>
</html>